<template>
  <div id="app">
    <ar-call />
  </div>
</template>

<script>
import ArCall from "./components/arcall/ArCall.vue";
import { initCallClient, loginArcallPlus, refreshBash } from "@/until/arcall";

export default {
  name: "App",
  components: {
    ArCall,
  },

  mounted() {
    this.initializeRTM();
  },
  methods: {
    /**
     * 项目运行需要登录RTM才可以发起呼叫/收到呼叫
     * (可以放在登陆页面)
     */
    async initializeRTM() {
      const store = this.$store;

      // 添加本地用户信息
      const userInfo = { userId: this.randomstr(4) };
      store.commit("addUserInfo", userInfo);

      // 判断是否已经存在 arcall 实例
      if (!refreshBash()) {
        await initCallClient();
      }
      // 通过本地状态判断是否需要继续登录(同一时间仅能登录一端)
      const getters = store.getters;
      if (!getters.getIsLogin) {
        // 登录 arcall 系统
        store.commit("updataIsLoginStatus", true);
        await loginArcallPlus(getters.getLocalUserInfo);
      }
    },

    /**
     * 生成随机字符串
     */
    randomstr(n) {
      let str = "0123456789";
      let tmp = "",
        i = 0,
        l = str.length;
      for (i = 0; i < n; i++) {
        tmp += str.charAt(Math.floor(Math.random() * l));
      }
      return tmp;
    },
  },
};
</script>

<style>
html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0px;
  overflow: hidden;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
}

</style>
